﻿<section id="first-form-section" class="section js-section u-category-first-form">
    <header class="section-header">
        <div class="section-wrapper">
            <h1>
                Your first HTML form
            </h1>
            <p class="summary">The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.</p>
        </div>
    </header>

    <div class="demo">
        <div class="demo-wrapper">
            <button id="first-form-demo-toggle" class="js-container-target demo-toggle-button">
                Implementing our form HTML
            </button>
            <div class="demo-box">
                <form action="/my-handling-form-page" method="post">
                    <div>
                        <label for="name">Name:</label> <input type="text" id="name" name="user_name">
                    </div>
                    <div>
                        <label for="mail">E-mail:</label> <input type="email" id="mail" name="user_mail">
                    </div>
                    <div>
                        <label for="msg">Message:</label> <textarea id="msg" name="user_message"></textarea>
                    </div>
                    <div class="button">
                        <button type="submit">Send your message</button>
                    </div>
                </form>

            </div>
        </div>
    </div>

    <div class="demo">
        <div class="demo-wrapper">
            <button id="first-form-style-demo-toggle" class="js-container-target demo-toggle-button">
                Basic form styling
            </button>
            <div class="demo-box">
                <style>
                    .form1 {
                      /* Just to center the form on the page */
                      margin: 0 auto;
                      width: 400px;
                      /* To see the outline of the form */
                      padding: 1em;
                      border: 1px solid #CCC;
                      border-radius: 1em;

                    }
                    .form1 div + div {
                      margin-top: 1em;
                    }
                    .form1 label {
                      /* To make sure that all labels have the same size and are properly aligned */
                      display: inline-block;
                      width: 90px;
                      text-align: right;
                    }
                    .form1 input, textarea {
                      /* To make sure that all text fields have the same font settings By default, textareas have a monospace font */
                      font: 1em sans-serif;
                      /* To give the same size to all text fields */
                      width: 300px;
                      box-sizing: border-box; /* To harmonize the look & feel of text field border */
                      border: 1px solid #999;
                    }
                    .form1 input:focus, textarea:focus {
                      /* To give a little highlight on active elements */
                      border-color: #000;
                    }
                    .form1 textarea {
                      /* To properly align multiline text fields with their labels */
                      vertical-align: top;
                      /* To give enough room to type some text */
                      height: 5em;
                    }
                    .form1.button {
                      /* To position the buttons to the same position of the text fields */
                      padding-left: 90px;
                      /* same size as the label elements */
                    }
                    .form1 button {
                      /* This extra margin represent roughly the same space as the space between the labels and their text fields */
                      margin-left: .5em;

                    }
                </style>
                <form action="/my-handling-form-page" method="post" class="form1">
                    <div class="intro">
                        <label for="name">Name:</label> <input type="text" id="name" name="user_name">
                    </div>
                    <div>
                        <label for="mail">E-mail:</label> <input type="email" id="mail" name="user_mail">
                    </div>
                    <div>
                        <label for="msg">Message:</label> <textarea id="msg" name="user_message"></textarea>
                    </div>
                    <div class="button">
                        <button type="submit">Send your message</button>
                    </div>
                </form>
                <pre><code data-path="sections/about.html"></code></pre>
            </div>
        </div>
    </div>

</section>
